<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直居中 - 使用 position 和 transform</title>
    <style>
   .center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
    </style>
</head>
<!-- 除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中: -->
<body>
    <h2>居中</h2>
    <p>以下实例中，我们使用了 positioning 和 transform 属性来设置水平和垂直居中：</p>
    
    <div class="center">
      <p>我是水平和垂直居中的。</p>
    </div>
    
    <p>注意: IE8 及更早版本不支持 transform 属性。</p>
    
</body>
</html>